<template>
    <v-app>
        <div>
            <v-sheet
                    tile
                    height="54"
                    class="d-flex"
            >
                <v-btn
                        icon
                        class="ma-2"
                        @click="$refs.calendar.prev()"
                >
                    <i class="el-icon-arrow-left"></i>
                </v-btn>
                <div class="ma-lg-auto ml-auto">
                    <v-toolbar-title v-if="$refs.calendar">
                        {{ $refs.calendar.title }}
                    </v-toolbar-title>
                </div>
                <v-spacer></v-spacer>
                <el-select v-model="dept.id" placeholder="请选择" :data="depts" class="ma-lg-auto ml-auto"
                           @change="getDocs">
                    <el-option
                            v-for="dept in depts"
                            :key="dept.id"
                            :label="dept.name"
                            :value="dept.id">
                    </el-option>
                </el-select>
                <v-btn
                        icon
                        class="ma-2"
                        @click="$refs.calendar.next()"
                >
                    <i class="el-icon-arrow-right"></i>
                </v-btn>
            </v-sheet>
            <v-sheet style="margin-left: 200px">
                <v-calendar
                        ref="calendar"
                        v-model="value"
                        :weekdays="weekday"
                        :type="type"
                        :events="events"
                        :event-color="getEventColor"
                        @change="getEvents"
                        interval-count="0"
                        interval-width="0"
                ></v-calendar>
            </v-sheet>
        </div>
        <div style="margin-right: 17px">
            <el-table
                    :data="shifts"
                    :span-method="objectSpanMethod"
                    border
                    :show-header=false
            >
                <el-table-column
                        prop="dname"
                        label="ID"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="mon"
                        label="">
                </el-table-column>
                <el-table-column
                        prop="tue"
                        label="">
                </el-table-column>
                <el-table-column
                        prop="wen"
                        label="">
                </el-table-column>
                <el-table-column
                        prop="thu"
                        label="">
                </el-table-column>
                <el-table-column
                        prop="fri"
                        label="">
                </el-table-column>
                <el-table-column
                        prop="sat"
                        label="">
                </el-table-column>
                <el-table-column
                        prop="sun"
                        label="">
                </el-table-column>
            </el-table>
        </div>
    </v-app>
</template>

<script>
    import {getData, postData, delData, putData} from "../../../api";
    import Vuetify from "vuetify";
    import zhHans from 'vuetify/es5/locale/zh-Hans'

    export default {
        mounted() {
            this.changeLocale()
            this.getDept()

        },
        name: "Shiftmng",
        data: () => ({
            type: 'week',
            weekday: [1, 2, 3, 4, 5, 6, 0],
            value: '',
            events: [],
            depts: [],
            docs: [],
            shifts: [],
            dept: {
                id: '',
                name: ''
            },
            doc: {
                did: '',
                dname: ''
            },
            shift: {
                did: '',
                mon: '',
                tue: '',
                wen: '',
                tur: '',
                fri: '',
                sat: '',
                sun: '',
            },
        }),
        methods: {
            async getDept() {
                const _this = this;
                const res = await getData('zdx/shift/dept')
                if (res.code === 20000) {
                    _this.depts = res.data;
                }
            },
            async getDocs(deptid) {
                const _this = this;
                const res = await getData('zdx/shift/doc/' + deptid)
                if (res.code === 20000) {
                    console.log(deptid);
                    _this.docs = res.data;
                    console.log(_this.docs)
                    _this.getShifts(deptid)
                }
            },
            async getShifts(deptid) {
                const _this = this;
                const start = document.querySelector(".v-calendar-daily__head div:nth-child(2) div:nth-child(3)").getAttribute('data-date');
                const end = document.querySelector(".v-calendar-daily__head div:nth-child(8) div:nth-child(3)").getAttribute('data-date');
                const res = await getData('zdx/shift/' + start + '&' + end + '&' + deptid)
                if (res.code === 20000) {
                    console.log(deptid);
                    _this.shifts = res.data;
                    console.log(_this.shifts)
                }
            },

            //变更语言方法，但是月份和星期简称并没有翻译，以后需要自行增加
            changeLocale() {
                this.$vuetify.lang.current = 'zhHans'
            },
            //保证每个日期格都有一个可被读取但不显示的event，因为格内只有event存有完整日期
            getEvents({start}) {
                const events = []
                const eventCount = 7
                const first = new Date(`${start.date}`)
                for (let i = 0; i < eventCount; i++) {
                    events.push({
                        name: '',
                        start: first.getTime(),
                        end: first.getTime(),
                        color: 'white',
                        timed: false,
                    })
                    first.setDate(first.getDate() + 1)
                }

                this.events = events
            },
            getEventColor(event) {
                return event.color
            },
        }
        ,
    }
</script>
